<script setup lang="ts">
import dayjs from "dayjs";
import { computed } from "vue";

const weekdays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];

const props = defineProps<{
  start: string;
  end: string;
}>();

const timeText = computed(() => {
  const { end, start } = props;

  if (start && end) {
    // const target = dayjs(start);

    // const week = weeks[target.day()];
    // const tS = target.format("HH:mm");
    // const tE = dayjs(end).format("HH:mm");
    // return `${start.split(" ")[0]} ${week} ${tS}-${tE}`;

    const startDayjs = dayjs(start);
    const endDayjs = dayjs(end);

    const isSameDay = startDayjs.isSame(endDayjs, "day");

    const formatDate = "YYYY-MM-DD";
    const formatTime = "HH:mm";

    // 获取星期几 (0-6)
    const startWeekday = weekdays[startDayjs.day()];
    const endWeekday = weekdays[endDayjs.day()];

    if (isSameDay) {
      // 同一天：YYYY-MM-DD 周X HH:mm-HH:mm
      return `${startDayjs.format(
        formatDate
      )} ${startWeekday} ${startDayjs.format(formatTime)}-${endDayjs.format(
        formatTime
      )}`;
    } else {
      // 不同天：YYYY-MM-DD 周X ~ YYYY-MM-DD 周X
      return `${startDayjs.format(
        formatDate
      )} ${startWeekday} ~ ${endDayjs.format(formatDate)} ${endWeekday}`;
    }
  }
});
</script>

<template>
  <text>{{ timeText }}</text>
</template>
